<<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                color: orange;
            }
            
            #one {
                /*盒子样式*/
                width: 180px;
                height: 160px;
                margin: 100px auto;
                position: relative;
                /*相对位置*/
            }
            
            #close {
                /*X样式*/
                width: 18px;
                height: 18px;
                border: solid 1px #e0e0e0;
                position: absolute;
                /*绝对位置*/
                text-align: center;
                line-height: 18px;
                cursor: pointer;
                /*鼠标停留后变为手指*/
                color: orange;
            }
            
            #two {
                /*二维码图片样式*/
                position: absolute;
                right: 0;
            }
            
            #text {
                /*文本样式*/
                width: 180px;
                height: 30px;
                border: #e0e0e0 1px solid;
                margin: 100px auto;
                text-align: center;
                margin-bottom: 0;
                font-size: 24px;
            }
        </style>
    </head>

    <body>


        <div id='one'>
            <div id="text">淘宝二维码</div>
            <img src="../JS素材/b2.png" id="two">
            <span id="close">X</span>
        </div>
        <script>
            var closespan = document.getElementById('close'); /*获取span元素*/
            var closediv = document.getElementById('one'); /*获取整个盒子元素*/
            closespan.onclick = function() { /*当点击X激发事件*/
                closediv.style.display = 'none'; /*关闭最外面的盒子*/
            }
        </script>
    </body>

    </html>